import React from 'react';
import { CloseOutlined } from '@ant-design/icons';

import _ from 'lodash';
import RGL, { Responsive, WidthProvider } from 'react-grid-layout';

import '/node_modules/react-grid-layout/css/styles.css';
import '/node_modules/react-resizable/css/styles.css';

import './index.less';

const ReactGridLayout = WidthProvider(RGL);

const ResponsiveGridLayout = WidthProvider(Responsive);

//获取此刻时间
function getTimeNow() {
  const now = new Date();
  return now.getTime();
}

export default class BasicLayout extends React.PureComponent {
  static defaultProps = {
    className: 'layout',
    items: 30,
    rowHeight: 30,
    onLayoutChange: function () {},
    cols: 12,
  };

  constructor(props) {
    super(props);

    const layout = this.generateLayout();
    this.timer = null;

    this.state = {
      layout,
      isLongClick: false,
      currentClickedItem: null,
    };
  }

  handleItemMouseDown = (data) => {
    console.log(data);

    const self = this;
    const timeStart = getTimeNow();
    self.timer = setInterval(() => {
      const timeEnd = getTimeNow();
      if (timeEnd - timeStart > 1000) {
        clearInterval(self.timer);
        self.setState({
          isLongClick: true,
          currentClickedItem: data,
        });
      }
    }, 100);
  };

  handleItemMouseUp = () => {
    clearInterval(this.timer);
    this.setState({
      isLongClick: false,
      currentClickedItem: null,
    });
  };

  generateDOM() {
    const { isLongClick, currentClickedItem } = this.state;
    const self = this;
    return _.map(_.range(this.props.items), function (i) {
      return (
        <div key={i}>
          <div
            onMouseDown={() => self.handleItemMouseDown(i)}
            onMouseUp={self.handleItemMouseUp}
            className={
              isLongClick && currentClickedItem === i ? 'shake animated' : ''
            }
            style={{ width: '100%', height: '100%' }}
          >
            {isLongClick && currentClickedItem === i && (
              <CloseOutlined className="closeIcon" />
            )}
          </div>
          <span>{i}</span>
        </div>
      );
    });
  }

  generateLayout() {
    const p = this.props;
    return _.map(new Array(p.items), function (item, i) {
      const y = _.result(p, 'y') || Math.ceil(Math.random() * 4) + 1;
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6) * y,
        w: 2,
        h: 2,
        i: i.toString(),
      };
    });
  }

  onLayoutChange(layout) {
    this.setState({ layout });
    // this.props.onLayoutChange(layout);
  }

  render() {
    return (
      <ReactGridLayout
        layout={this.state.layout}
        onLayoutChange={this.onLayoutChange}
        // 是否可缩放
        isResizable={false}
        // breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        // cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}

        {...this.props}
        className="container"
      >
        {this.generateDOM()}
      </ReactGridLayout>
    );
  }
}
